Datastar Examples

August 18, 2025Some sections don't work as they require a backend to stream events, and this is hosted on github pages. Github

Go Dependencies: Templ BunRouter DataStar

styles and data bindings

signal: $foo

special element tag (with properties like an element in js)

length:

local signals

$_foo:
$foo:

data-attr

data-signals

TODO: data-signals-sig.one="1" not working, check the code

data-on

interval

interval__duration.1s:

drag and drop list

change styles

Hello, World!

external js

external async js

TODO: does not work

webcomponents

modal

get templ fragment

Backend Code

router := bunrouter.New()
router.GET("/templ-response", func(w http.ResponseWriter, req bunrouter.Request) error {
    sse := datastar.NewSSE(w, req.Request)

    sse.PatchElementTempl(hal())
    time.Sleep(1 * time.Second)
    sse.PatchElementTempl(halWait())

    templ.Handler(Index()).ServeHTTPBufferedFragment(w, req.Request)
    return nil
})

get with signal

asdf

Backend Code

router.GET("/baz-signal", func(w http.ResponseWriter, req bunrouter.Request) error {
    sse := datastar.NewSSE(w, req.Request)
    sse.MarshalAndPatchSignals(struct {
        Baz string 'json:"baz"'
    }{
        Baz: "this is a response from signal",
    })
    return nil
})

signal and on-click

Backend Code

router.GET("/backend-signal", func(w http.ResponseWriter, req bunrouter.Request) error {
    sse := datastar.NewSSE(w, req.Request)

    type hal struct {
        Hal string 'json:"hal"'
    }

    sse.MarshalAndPatchSignals(hal{
        Hal: "He's home.",
    })
    time.Sleep(time.Second)
    sse.MarshalAndPatchSignals(hal{
        Hal: "...",
    })
return nil
})

operators

Countdown (12 → 0):

Backend Code

router.POST("/launch/:truthy", func(w http.ResponseWriter, req bunrouter.Request) error {
    sse := datastar.NewSSE(w, req.Request)
    type l struct {
        L bool 'json:"landingGearRetracted"'
    }
    type t struct {
        T int 'json:"timeRemaining"'
    }
    aa := &l{}
    datastar.ReadSignals(req.Request, aa)
    for i := 12; i >= 0; i-- {
        sse.MarshalAndPatchSignals(t{T: i})
        time.Sleep(time.Second)
    }
    sse.MarshalAndPatchSignals(l{L: true})
    w.Header().Set("Cache-Control", "max-age=100")
    return nil
})

loading

Backend Code

router.GET("/delay", func(w http.ResponseWriter, req bunrouter.Request) error {
    time.Sleep(time.Second * 5)
    return nil
})

request js from backend

Backend Code

router.GET("/backjs", func(w http.ResponseWriter, req bunrouter.Request) error {
sse := datastar.NewSSE(w, req.Request)
// NOTE: default response on ExecuteScript
//
<script data-effect="el.remove()">
    // alert('...')
    // </script
    sse.ExecuteScript(
        fmt.Sprintf(
            "alert('global_signals: ${JSON.stringify(JSON.parse(decodeURIComponent('%s')), null, '  ')}')",
            req.URL.Query().Get("datastar"),
        ),
    )
    return nil
})

filter signals and custom headers

NOTE: not recommended to send filtered signals as backend should know the complete state of the frontend for better state sync between client and server

Backend Code

router.GET("/backjs", func(w http.ResponseWriter, req bunrouter.Request) error {
    sse := datastar.NewSSE(w, req.Request)
    // NOTE: default response on ExecuteScript
    // <script data-effect="el.remove()">
    // alert('...')
    // </script
    sse.ExecuteScript(
        fmt.Sprintf(
            "alert('global_signals: ${JSON.stringify(JSON.parse(decodeURIComponent('%s')), null, '  ')}')",
            req.URL.Query().Get("datastar"),
        ),
    )
    return nil
})